import 'package:amoy_ticket/utils/object_util.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class HomeTabBarEight extends StatefulWidget {
  HomeTabBarEight({Key? key}) : super(key: key);

  @override
  _HomeTabBarEightState createState() => _HomeTabBarEightState();
}

class _HomeTabBarEightState extends State<HomeTabBarEight> {
  int selectIndex = 0;
  List homeTabEightList = [
    {
      'imageUrl':
          'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/images/home_tab_eight/image1.png',
      'name': '[南京]许嵩、郭顶 南京森林音乐狂欢节',
      'time': '2021.11.06-10.07',
      'place': '江北新区扬子江公园 ',
      'distance': '10.2',
      'price': '310',
    },
    {
      'imageUrl':
          'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/images/home_tab_eight/image2.png',
      'name': '[南京]张韶涵世界巡回演唱会 南京站',
      'time': '2021.11.06',
      'place': '南京奥体中心体育场',
      'distance': '2.0',
      'price': '411',
    },
    {
      'imageUrl':
          'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/images/home_tab_eight/image3.png',
      'name': '[南京]BOY STORY-蓝鲸音乐节',
      'time': '2021.10.24 周日 20:00',
      'place': '南京欢乐谷',
      'distance': '32.9',
      'price': '424',
    },
    {
      'imageUrl':
          'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/images/home_tab_eight/image4.png',
      'name': '[南京]李荣浩巡回演唱会南京站',
      'time': '2021.11.13 周六 19:30',
      'place': '南京奥体中心体育场',
      'distance': '2.0',
      'price': '490',
    },
    {
      'imageUrl':
          'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/images/home_tab_eight/image5.png',
      'name': '[南京]南京欢乐谷蓝鲸音乐节【10月30日萧敬腾】',
      'time': '2021.10.30 周六 20:00',
      'place': '南京欢乐谷',
      'distance': '32.9',
      'price': '424',
    },
    {
      'imageUrl':
          'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/images/home_tab_eight/image6.png',
      'name': '[南京]海龟先生-欢乐谷蓝鲸音乐节',
      'time': '2021.10.23 周六 20:00',
      'place': '南京欢乐谷',
      'distance': '32.9',
      'price': '424',
    },
    {
      'imageUrl':
          'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/images/home_tab_eight/image7.png',
      'name': '[南京]张信哲世界巡回演唱会 南京站',
      'time': '2021.11.20 周六 19:30',
      'place': '南京奥体中心体育场',
      'distance': '2.0',
      'price': '4.2',
    },
    {
      'imageUrl':
          'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/images/home_tab_eight/image8.png',
      'name': '[泰州]《“瓶笙花影”——千年雅乐的前世今生》',
      'time': '2021.12.05 周日 19:30',
      'place': '泰州大剧院',
      'distance': '124.8',
      'price': '',
    },
    {
      'imageUrl':
          'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/images/home_tab_eight/image9.png',
      'name': '[泰州]《飘·谣》马条保利京剧院全国巡演——泰州站',
      'time': '2021.11.21 周日 19:30',
      'place': '泰州大剧院',
      'distance': '124.3',
      'price': '',
    },
    {
      'imageUrl':
          'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/images/home_tab_eight/image10.png',
      'name': '[常州]汪苏泷/姜云升/西太湖国际音乐节',
      'time': '2021.09.19-11.07',
      'place': '常州西太湖中国花卉博览中心',
      'distance': '107.8',
      'price': '265',
    },
    {
      'imageUrl':
          'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/images/home_tab_eight/image11.png',
      'name': '[苏州]新裤子巡回演唱会 苏州站',
      'time': '2021.11.06 周六 19:30',
      'place': '苏州市体育中心体育馆',
      'distance': '192.8',
      'price': '391',
    },
    {
      'imageUrl':
          'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/images/home_tab_eight/image12.png',
      'name': '[苏州]薛之谦巡回演唱会苏州站',
      'time': '2021.10.23-10.24',
      'place': '苏州市体育中心体育馆',
      'distance': '192.8',
      'price': '576',
    },
  ];
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: [
          _tabList(),
          Container(
            // height: 100,
            color: Color(0xFFf5f5f5),
            padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 15.h),
            child: Wrap(
              spacing: 8.w,
              runSpacing: 10.h,
              alignment: WrapAlignment.spaceBetween,
              runAlignment: WrapAlignment.start,
              children: homeTabEightList.map((e) {
                return _widget(
                  e['imageUrl'],
                  e['name'],
                  e['time'],
                  e['place'],
                  e['distance'],
                  price: e['price'],
                );
              }).toList(),
            ),
          ),
        ],
      ),
    );
  }

  Widget _widget(
      String imageUrl, String name, String time, String space, String distance,
      {String? price}) {
    return Container(
      width: MediaQuery.of(context).size.width / 2 - 20,
      child: Stack(
        children: [
          Column(
            children: [
              Container(
                height: 250,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(6.r),
                  image: DecorationImage(
                    fit: BoxFit.fill,
                    image: CachedNetworkImageProvider(imageUrl),
                  ),
                ),
                // height: 300,
              ),
              Container(
                margin: EdgeInsets.symmetric(horizontal: 5.w, vertical: 5.h),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      name,
                      maxLines: 2,
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(
                        fontSize: 13.sp,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    Text(
                      time,
                      style: TextStyle(color: Colors.grey),
                    ),
                    Row(
                      children: [
                        Expanded(
                          child: Text(
                            space,
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                            style: TextStyle(color: Colors.grey),
                          ),
                        ),
                        // SizedBox(width: 3.w),
                        Expanded(
                          child: Text(
                            '${distance}km',
                            style: TextStyle(color: Colors.grey),
                          ),
                        )
                      ],
                    ),
                    ObjectUtil.isNotEmpty(price)
                        ? Row(
                            children: [
                              Text(
                                ObjectUtil.isNotEmpty(price) ? '￥$price' : '',
                                style: TextStyle(
                                    color: Colors.red, fontSize: 14.sp),
                              ),
                              Text(
                                '起',
                                style: TextStyle(color: Colors.grey),
                              ),
                            ],
                          )
                        : Container(
                            height: 15.h,
                          )
                  ],
                ),
              ),
            ],
          ),
          Positioned(
              right: 10.w,
              bottom: 7.h,
              child: Image.asset(
                'assets/images/want_to_see.png',
                width: 15.w,
                height: 15.w,
                color: Colors.black,
              )),
        ],
      ),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(6.r),
      ),
    );
  }

  Widget _tabList() {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 12.w),
      child: Row(
        children: [
          _tabWidget('人气', 0),
          _tabWidget('折扣', 1),
          _tabWidget('最近开演', 2),
          _tabWidget('上新', 3),
          _tabWidget('距离', 4),
        ],
      ),
    );
  }

  _tabWidget(String text, int index) {
    return Row(
      children: [
        GestureDetector(
          child: Text(
            text,
            style: selectIndex == index
                ? _selectTextStyle()
                : _unSelectTextStyle(),
          ),
          onTap: () {
            selectIndex = index;
            setState(() {});
          },
        ),
        SizedBox(width: 15.w),
      ],
    );
  }

  _selectTextStyle() {
    return TextStyle(
        fontSize: 12.sp, color: Color(0xFF0f0f0f), fontWeight: FontWeight.bold);
  }

  _unSelectTextStyle() {
    return TextStyle(fontSize: 12.sp, color: Color(0xFF686868));
  }
}
